<!--
 * @Descripttion:
 * @version:
 * @Author: cdy
 * @Date: 2025-06-30 10:13:46
 * @LastEditors: cdy
 * @LastEditTime: 2025-08-08 14:42:02
-->
<template>
  <div
    class="pageContain"
    style="color: black; width: 100%; background: #efefef; overflow: hidden"
  >
    <div class="pageContainBack divBeteewn">
      <div class="useLeft" style="width: 58.5%">
        <div class="userTop">实时用电排名</div>
        <div class="userCenter divFlexAround">
          <div class="centerLeft">
            <div class="centerLeftContain">
              <div class="centerLeftName divCenter">
                设备能耗TOP排名
                <div class="clickName" @click="showGroup()">设备</div>
              </div>
              <div class="centerLine"></div>
              <el-table
                :data="deviceTop"
                :show-header="false"
                empty-text="暂无数据"
                :cell-style="{ fontSize: '0.7vw' }"
              >
                <el-table-column
                  label=""
                  align="left"
                  prop="name"
                  min-width="100"
                ></el-table-column>
                <el-table-column
                  label=""
                  align="center"
                  prop="number"
                  min-width="110"
                >
                </el-table-column>
                <el-table-column
                  label=""
                  align="center"
                  prop="enenger"
                  min-width="60"
                >
                  <template #default="scope">
                    <div>{{ scope.row.enenger }}KW.h</div>
                  </template></el-table-column
                >
                <el-table-column
                  type="index"
                  label=""
                  align="center"
                  prop="line"
                  width="50"
                ></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="centerLeft">
            <div class="centerLeftContain">
              <div class="centerLeftName divCenter">
                分组能耗TOP排名
                <div class="clickName" @click="showGroup1()">分组</div>
              </div>
              <div class="centerLine"></div>
              <el-table
                :data="groupTop"
                :show-header="false"
                empty-text="暂无数据"
                :cell-style="{ fontSize: '0.7vw' }"
              >
                <el-table-column
                  label=""
                  align="left"
                  prop="name"
                  min-width="100"
                ></el-table-column>

                <el-table-column label="" align="center" prop="value">
                  <template #default="scope">
                    <div>{{ scope.row.value }}KW.h</div>
                  </template>
                </el-table-column>
                <el-table-column
                  label=""
                  type="index"
                  align="center"
                  prop="line"
                  width="50"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="useLeft" style="width: 40.5%">
        <div class="userTop" style="width: 14.6vw">光伏设备用能分析</div>
        <div class="rightCenterTop divJustFlex">
          <div class="guangfu"></div>
          <div class="centerElectText">
            <div class="centerElectTextOne">
              实时发电量:<span>{{ currentAll }}/KW.h</span>
            </div>
            <div class="centerElectTextOne">
              实时上网:<span>{{ currentUp }}/KW.h</span>
            </div>
            <div class="centerElectTextOne">
              实时自用:<span>{{ currentUse }}/KW.h</span>
            </div>
          </div>
        </div>
        <div class="searchContain divFlex">
          <div class="icon"></div>
          <div class="iconName">电量查询</div>
          <el-config-provider :locale="locale">
            <el-date-picker
              v-model="startTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              @change="caculateTimeS2(startTime, endTime)"
              style="width: 8vw; margin-left: 4vw; font-size: 0.8vw"
            ></el-date-picker
          ></el-config-provider>
          <div class="to divCenter">至</div>
          <el-config-provider :locale="locale">
            <el-date-picker
              v-model="endTime"
              type="date"
              style="width: 8vw; font-size: 0.8vw"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              @change="caculateTimeS2(startTime, endTime)"
            ></el-date-picker
          ></el-config-provider>
        </div>

        <div class="searchOne divFlex">
          <div class="searchOneText">发电量:</div>
          <div class="searchelect">{{ searchAll }}/KW.h</div>
        </div>
        <div class="searchOne divFlex">
          <div class="searchOneText">自用电量:</div>
          <div class="searchelect">{{ searchUse }}/KW.h</div>
        </div>
        <div class="searchOne divFlex">
          <div class="searchOneText">上网电量:</div>
          <div class="searchelect">{{ searchUp }}/KW.h</div>
        </div>
      </div>

      <div class="dialog" :style="{ display: dialog1 }">
        <div class="dialogInner" style="overflow: auto">
          <div style="width: 6vw; height: 100%"></div>

          <div
            class="dialogInnerText"
            style="height: 85vh; margin-left: 2vw; width: 57vw"
          >
            <div class="dialogTop1 divCenter">
              <div class="adddeviceaddeviceLeft" style="width: 23.5vw">
                <div class="addeviceLeft">
                  <div class="addeviceTop divFlex">
                    <div class="deviceName" @click="showGroup1()">排名设备</div>
                    <el-input
                      v-model="onTopDevice"
                      style="
                        width: 16vw;
                        height: 4vh;
                        margin-left: 1vw;
                        font-size: 1vw;
                      "
                      placeholder="设备名称"
                    >
                      <template #append>
                        <el-icon
                          class="el-input__icon"
                          @click="handSearchTopDevice()"
                          ><search
                        /></el-icon>
                      </template>
                    </el-input>
                  </div>
                  <div class="justTable" id="justTable">
                    <el-table
                      :data="addDeviceListSave"
                      @selection-change="selecttableFunction"
                      style="width: 100%; height: auto; font-size: 0.8vw"
                      :header-cell-style="{ height: '3vh' }"
                      max-height="52vh"
                      empty-text="暂无数据"
                      ref="smallTable"
                    >
                      <el-table-column
                        type="selection"
                        prop="全选"
                        align="center"
                      />
                      <el-table-column
                        prop="name"
                        label="全选"
                      ></el-table-column>
                      <el-table-column prop="number" label=""></el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="adddevice divflexColumn" style="width: 6vw">
                <div class="leftArrow" @click="clickLeftToAdd()"></div>
                <div class="rightArrow" @click="clickRightToRemove()"></div>
              </div>
              <div class="adddevice" style="width: 23.5vw">
                <div class="addeviceLeft">
                  <div class="addeviceTop divFlex">
                    <div class="deviceName">全部设备</div>
                    <el-input
                      v-model="inputDeviceAll"
                      style="
                        width: 16vw;
                        height: 4vh;
                        margin-left: 1vw;
                        font-size: 1vw;
                      "
                      placeholder="设备名称"
                    >
                      <template #append>
                        <el-icon class="el-input__icon" @click="handClick()"
                          ><search
                        /></el-icon>
                      </template>
                    </el-input>
                  </div>
                  <div class="justTable">
                    <el-table
                      :data="deviceListSave"
                      @selection-change="selecttableFunction"
                      style="width: 100%; height: auto; font-size: 0.8vw"
                      :header-cell-style="{ height: '3vh' }"
                      max-height="52vh"
                      empty-text="暂无数据"
                      ref="myTable"
                    >
                      <el-table-column
                        type="selection"
                        prop="全选"
                        align="center"
                      />
                      <el-table-column
                        prop="name"
                        label="全选"
                      ></el-table-column>
                      <el-table-column prop="number" label=""></el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>

            <div class="dubleButton divCenter">
              <div
                class="cancelButton divCenter"
                style="background: #d30000"
                @click="close()"
              >
                取消
              </div>
              <div
                class="sureButton divCenter"
                @click="sureAddDeviceOneOrMany()"
              >
                确定
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog" :style="{ display: dialog2 }">
        <div class="dialogInner" style="overflow: auto">
          <div style="width: 6vw; height: 100%"></div>

          <div
            class="dialogInnerText"
            style="height: 85vh; margin-left: 2vw; width: 57vw"
          >
            <div class="dialogTop1 divCenter">
              <div class="adddeviceaddeviceLeft" style="width: 23.5vw">
                <div class="addeviceLeft">
                  <div class="addeviceTop divFlex">
                    <div class="deviceName">排名分组</div>
                    <el-input
                      v-model="searchAddGroup"
                      style="
                        width: 16vw;
                        height: 4vh;
                        margin-left: 1vw;
                        font-size: 1vw;
                      "
                      placeholder="分组名称"
                    >
                      <template #append>
                        <el-icon
                          class="el-input__icon"
                          @click="handClickSearchAddGroup()"
                          ><search
                        /></el-icon>
                      </template>
                    </el-input>
                  </div>
                  <div class="justTable" id="justTable">
                    <el-table
                      :data="addGroupSave"
                      @selection-change="selecttableFunction"
                      style="width: 100%; height: auto; font-size: 0.8vw"
                      :header-cell-style="{ height: '3vh' }"
                      max-height="52vh"
                      empty-text="暂无数据"
                    >
                      <el-table-column
                        type="selection"
                        prop="全选"
                        align="center"
                      />
                      <el-table-column
                        prop="name"
                        label="全选"
                      ></el-table-column>
                      <el-table-column prop="number" label=""></el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="adddevice divflexColumn" style="width: 6vw">
                <div class="leftArrow" @click="clickLeftToAdd1()"></div>
                <div class="rightArrow" @click="clickRightToRemove1()"></div>
              </div>
              <div class="adddevice" style="width: 23.5vw">
                <div class="addeviceLeft">
                  <div class="addeviceTop divFlex">
                    <div class="deviceName">全部分组</div>
                    <el-input
                      v-model="searchAllGroup"
                      style="
                        width: 16vw;
                        height: 4vh;
                        margin-left: 1vw;
                        font-size: 1vw;
                      "
                      placeholder="分组名称"
                    >
                      <template #append>
                        <el-icon
                          class="el-input__icon"
                          @click="handClickSearchAllGroup()"
                          ><search
                        /></el-icon>
                      </template>
                    </el-input>
                  </div>
                  <div class="justTable">
                    <el-table
                      :data="allGroupSave"
                      @selection-change="selecttableFunction"
                      style="width: 100%; height: auto; font-size: 0.8vw"
                      :header-cell-style="{ height: '3vh' }"
                      max-height="52vh"
                    >
                      <el-table-column
                        type="selection"
                        prop="全选"
                        align="center"
                      />
                      <el-table-column
                        prop="name"
                        label="全选"
                      ></el-table-column>
                      <el-table-column prop="id" label=""></el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>

            <div class="dubleButton divCenter">
              <div
                class="cancelButton divCenter"
                style="background: #d30000"
                @click="close()"
              >
                取消
              </div>
              <div
                class="sureButton divCenter"
                @click="sureAddGroupOneOrMany()"
              >
                确定
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sendMessage from "@/mitt/sendMessage.js";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { getAllDevice } from "@/mitt/pay.js";
import service from "@/api/api";
import { getToday } from "@/mitt/until";
export default {
  beforeRouteEnter(to, from, next) {
    sendMessage(3, "用能情况");
    next();
  },

  data() {
    return {
      currentUse: "",
      currentUp: "",
      currentAll: "",
      selectLong: "",
      date1: "",
      locale: zhCn,
      dialog1: "none",
      dialog2: "none",
      deviceName: "",
      inputDeviceAll: "",
      multi: [],
      addOrEdit: "",

      groupList: [],
      deviceTop: [
        { name: "设备一", number: "SNXXXXX", enenger: "XXXKW/H ", line: 1 },
        { name: "设备一", number: "SNXXXXX", enenger: "XXXKW/H ", line: 2 },
        { name: "设备一", number: "SNXXXXX", enenger: "XXXKW/H ", line: 3 },
        { name: "设备一", number: "SNXXXXX", enenger: "XXXKW/H ", line: 4 },
        { name: "设备一", number: "SNXXXXX", enenger: "XXXKW/H ", line: 5 },
      ],
      groupTop: [
        { name: "分组1", number: "SNXXXXX", enenger: "XXXKW/H ", line: 1 },
        { name: "分组2", number: "SNXXXXX", enenger: "XXXKW/H ", line: 2 },
        { name: "分组3", number: "SNXXXXX", enenger: "XXXKW/H ", line: 3 },
        { name: "分组4", number: "SNXXXXX", enenger: "XXXKW/H ", line: 4 },
        { name: "分组5", number: "SNXXXXX", enenger: "XXXKW/H ", line: 5 },
      ],
      time: "",
      dialog5: "block",
      groupList: [],
      input4: "",
      startTime: "",
      endTime: "",
      searchUse: "",
      searchUp: "",
      searchAll: "",
      timeOut: null,
      onTopDevice: "",

      addDeviceList: [],
      addDeviceListSave: [],

      deviceList: [],
      deviceListSave: [],

      addGroup: [],
      addGroupSave: [],

      allGroup: [],
      allGroupSave: [],

      searchAddGroup: "",
      searchAllGroup: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    handClickSearchAddGroup() {
      this.addGroupSave = [];
      if (this.searchAddGroup) {
        this.addGroup.forEach((item) => {
          if (item.name.includes(this.searchAddGroup)) {
            this.addGroupSave.push(item);
          }
        });
      } else {
        this.addGroupSave = this.addGroup;
      }
    },
    handClickSearchAllGroup() {
      this.allGroupSave = [];
      if (this.searchAllGroup) {
        this.allGroup.forEach((item) => {
          if (item.name.includes(this.searchAllGroup)) {
            this.allGroupSave.push(item);
          }
        });
      } else {
        this.allGroupSave = this.allGroup;
      }
    },
    handSearchTopDevice() {
      if (this.onTopDevice) {
        this.addDeviceListSave = [];
        this.addDeviceList.forEach((item) => {
          if (item.name.includes(this.onTopDevice)) {
            this.addDeviceListSave.push(item);
          }
        });
      } else {
        this.addDeviceListSave = this.addDeviceList;
      }
    },
    // 获取排名设备和分组设备
    async getDeviceAndGroup() {
      let res = await service({
        method: "get",
        url: "/energy-situation/energy-top",
      });
      console.log("res", res);
      if (res.status == "SUCCESS") {
        this.deviceTop = res.data.deviceTop;
        let arr = [];
        this.deviceTop.forEach((item) => {
          arr.push({
            name: item[0],
            number: item[1],
            enenger: item[2],
          });
        });
        console.log(arr);
        this.deviceTop = arr;

        this.groupTop = res.data.groupTop;
      }
    },
    caculateTimeS2(a, b) {
      if (a && b) {
        let time1 = new Date(a).getTime();
        let time2 = new Date(b).getTime();
        let actualTime = (time2 - time1) / 1000;
        if (actualTime < 0) {
          this.endTime = "";
          return this.$message({
            message: "后项时间不能早于前项,已重置后项时间",
            type: "warning",
          });
        } else {
          this.getSearchOldNumber();
        }
      }
    },
    disabledDate(time) {
      // 只允许选择今天之后的日期
      return time.getTime() > new Date().getTime();
    },
    searchAllDevice() {},
    sureAddDeviceOneOrMany() {
      service({
        method: "post",
        url: "/energy-situation/update-device-info",
        data: this.addDeviceList,
      })
        .then((e) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.close();
        })
        .catch((err) => {
          this.$message({
            message: "出错了",
            type: "warning",
          });
          this.close();
        });
    },
    sureAddGroupOneOrMany() {
      service({
        method: "post",
        url: "/energy-situation/update-group-info",
        data: this.addGroup,
      })
        .then((e) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.close();
        })
        .catch((err) => {
          this.$message({
            message: "出错了",
            type: "warning",
          });
          this.close();
        });
    },
    clickLeftToAdd() {
      this.multi.forEach((item) => {
        this.deviceList.forEach((it) => {
          if (item == it.id) {
            if (!this.addDeviceList.includes(it)) {
              this.addDeviceList.push(it);
              let index = this.deviceList.indexOf(it);
              this.deviceList.splice(index, 1);
              this.deviceListSave = this.deviceList;
              this.inputDeviceAll = "";
              this.addDeviceListSave = this.addDeviceList;
            }
          }
        });
      });
      this.$nextTick(() => {
        this.$refs.myTable.clearSelection(); // 清空所有选中状态
        this.multi = [];
      });
    },
    clickRightToRemove() {
      this.multi.forEach((item) => {
        this.addDeviceList.forEach((it) => {
          if (item == it.id) {
            if (!this.deviceList.includes(it)) {
              this.deviceList.push(it);
              let index = this.addDeviceList.indexOf(it);
              this.addDeviceList.splice(index, 1);
              this.addDeviceListSave = this.addDeviceList;
              this.inputDeviceAll = "";
              this.deviceListSave = this.deviceList;
            }
          }
        });
      });
      this.$nextTick(() => {
        this.$refs.smallTable.clearSelection(); // 清空所有选中状态
        this.multi = [];
      });
    },

    clickLeftToAdd1() {
      this.multi.forEach((item) => {
        this.allGroup.forEach((it) => {
          if (item == it.id) {
            if (!this.addGroup.includes(it)) {
              this.addGroup.push(it);
              let index = this.allGroup.indexOf(it);
              this.allGroup.splice(index, 1);
              this.allGroupSave = this.allGroup;
              // this.inputDeviceAll = "";
              this.addGroupSave = this.addGroup;
            }
          }
        });
      });
      this.$nextTick(() => {
        this.$refs.myTable.clearSelection(); // 清空所有选中状态
        this.multi = [];
      });
      this.searchAddGroup = "";
      this.searchAllGroup = "";
    },
    clickRightToRemove1() {
      this.multi.forEach((item) => {
        this.addGroup.forEach((it) => {
          if (item == it.id) {
            if (!this.allGroup.includes(it)) {
              this.allGroup.push(it);
              let index = this.addGroup.indexOf(it);
              this.addGroup.splice(index, 1);
              this.addGroupSave = this.addGroup;
              // this.inputDeviceAll = "";

              this.allGroupSave = this.allGroup;
            }
          }
        });
      });
      this.$nextTick(() => {
        this.$refs.smallTable.clearSelection(); // 清空所有选中状态
        this.multi = [];
      });
      this.searchAddGroup = "";
      this.searchAllGroup = "";
    },
    handClick() {
      this.deviceListSave = [];
      if (this.inputDeviceAll) {
        this.deviceList.forEach((item) => {
          if (item.name.includes(this.inputDeviceAll)) {
            this.deviceListSave.push(item);
          }
        });
      } else {
        this.deviceListSave = this.deviceList;
      }
    },

    async getGroup() {
      let res = await getAllDevice("get", "/energy-situation/top-all-group");

      if (res.status == "SUCCESS") {
        this.groupList = res.data;
      }
    },
    async getDevice() {
      let res = await getAllDevice("get", "/energy-situation/top-all-device");

      if (res.status == "SUCCESS") {
        res.data.existDevice.forEach((item) => {
          res.data.allDevice.forEach((it) => {
            if (item.id == it.id) {
              let index = res.data.allDevice.indexOf(it);

              res.data.allDevice.splice(index, 1);
            }
          });
        });
        this.deviceList = res.data.allDevice;

        this.deviceListSave = this.deviceList;

        this.addDeviceList = res.data.existDevice;
        this.addDeviceListSave = res.data.existDevice;
      }
    },

    async getGroup() {
      let res = await getAllDevice("get", "/energy-situation/top-all-group");

      if (res.status == "SUCCESS") {
        res.data.existGroup.forEach((item) => {
          res.data.allGroup.forEach((it) => {
            if (item.id == it.id) {
              let index = res.data.allGroup.indexOf(it);

              res.data.allGroup.splice(index, 1);
            }
          });
        });

        this.allGroup = res.data.allGroup;

        this.allGroupSave = res.data.allGroup;

        this.addGroup = res.data.existGroup;
        this.addGroupSave = res.data.existGroup;
      }
    },

    selecttableFunction(row) {
      if (row.length > 0) {
        this.multi = [];
        row.forEach((element) => {
          this.multi.push(element.id);
        });
      } else {
        this.multi = [];
      }
    },

    handleResize() {},
    showGroup() {
      this.dialog1 = "block";
    },
    showGroup1() {
      this.dialog2 = "block";
    },
    close() {
      this.dialog1 = "none";
      this.dialog2 = "none";
      this.getDevice();
      this.$nextTick(() => {
        this.$refs.myTable.clearSelection(); // 清空所有选中状态
        this.$refs.smallTable.clearSelection();
        this.multi = [];
      });
    },
    // 光伏设备获取数据
    async getPhotovoltaic() {
      let that = this;
      let res = await service({
        method: "get",
        url: "/energy-situation/real-time-data",
      });
      if (res.status == "SUCCESS") {
        this.currentUse = res.data.usedValue;
        this.currentUp = res.data.outputValue;
        this.currentAll = this.currentUse + this.currentUp;

        this.currentAll = Math.round(this.currentAll * 10) / 10; //

        // this.currentAll.toFixed(1);
        if (this.timeOut) {
          this.clearTimeoutFunction();
        }
        this.timeOut = setTimeout(function () {
          that.getPhotovoltaic();
        }, 5000);
      }
    },
    clearTimeoutFunction() {
      clearTimeout(this.timeOut);
    },
    async getSearchOldNumber() {
      let data = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      let res = await service({
        method: "get",
        url: "/energy-situation/electricity-inquiry",
        params: data,
      });
      if (res.status == "SUCCESS") {
        this.searchUse = res.data[0];
        this.searchUp = res.data[1];
        this.searchAll = this.searchUse + this.searchUp;
        this.searchAll = this.searchAll.toFixed(1);
      }
    },
  },

  created() {
    // this.getRenderList();
    // this.getGroup();
    this.getDeviceAndGroup();
    this.getDevice();
    this.getGroup();
    this.getPhotovoltaic();
    this.startTime = getToday();
    this.endTime = getToday();
    this.getSearchOldNumber();
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.handleResize);
    });
  },
  beforeUnmount() {
    // Vue 3（Vue 2 用 beforeDestroy）
    window.removeEventListener("resize", this.handleResize);
    this.clearTimeoutFunction();
  },
};
</script>
<style lang="less" scoped>
:deep(.el-checkbox__inner) {
  box-shadow: 0 0 0 1px #0281b8 inset;
}
:deep(.el-table .el-checkbox__inner) {
  transform: scale(2); /* 放大1.5倍 */
  margin: 6px; /* 增加外边距避免重叠 */
}
.el-table {
  font-size: 1vw;
  font-weight: 400;
  color: black;
}
:deep(.el-input) {
  font-size: 1vw;
  box-shadow: 0 0 0 1px #0281b8 inset;
  background: #efefef;
  height: 4vh;
}
.el-input {
  height: 4vh;
}

:deep(.el-input__wrapper) {
  height: 4vh;
  background: #efefef !important;
  border-right: none;
  box-shadow: none;
  border: 1px solid #0281b8;
}

:deep(.el-input-group__append) {
  box-shadow: 0 1px 0 0 #0281b8 inset, 0 -1px 0 0 #0281b8 inset,
    -1px 0 0 0 #0281b8 inset !important;
  background: #efefef !important;
  height: 4vh !important;
}
:deep(.el-datePicker-panel) {
  font-size: 0.7vw !important;
}
.rightCenterTop {
  width: 80%;
  height: 10vh;
  // background: red;
  margin: auto;
  margin-top: 4vh;
  .guangfu {
    width: 12.7vw;
    height: 9.4vh;
    background: url(@/assets/img/guangfu.png);
    background-size: 100% 100%;
  }
}

.useLeft {
  height: 89vh;
  background: white;
  .userTop {
    width: 11.8vw;
    line-height: 6vh;
    background: url(@/assets/img/userTop.png);
    background-size: 100% 100%;
    color: white;
    font-size: 1.2vw;
    font-weight: 600;
    text-indent: 1em;
    font-family: smallMenu;
  }
  .userCenter {
    .centerLeft {
      width: 47%;
      height: 77vh;
      margin-top: 4vh;
      background: url(@/assets/img/leftBigBack.png);
      background-size: 100% 100%;
      .centerLeftContain {
        width: 94%;
        height: 100%;
        // background: red;
        margin: auto;
        .centerLeftName {
          font-size: 1.2vw;
          font-weight: 600;
          color: black;
          position: relative;
          .clickName {
            position: absolute;
            right: 0;
            color: #0059b2;
            font-weight: 600;
            font-size: 1vw;
          }
        }
        .centerLine {
          width: 100%;
          border-bottom: 2px solid black;
          margin-top: 1vh;
        }
      }
    }
  }
}
.centerElectText {
  flex-grow: 1;
  flex-wrap: wrap;
  .centerElectTextOne {
    margin-left: 1vw;
    font-size: 1vw;
    color: black;
    line-height: 3vh;
    span {
      color: #005ebb;
      font-weight: 600;
    }
  }
}
.searchContain {
  width: 80%;
  margin: auto;
  margin-top: 4vh;
  .icon {
    width: 1.25vw;
    height: 1.25vw;
    background: url(@/assets/img/searchIcon.png);
    background-size: 100% 100%;
  }
  .iconName {
    color: #005ebb;
    font-size: 1.2vw;
    font-weight: 600;
    margin-top: -0.2vw;
    margin-left: 0.2vw;
  }
}
.searchOne {
  width: 80%;
  margin: auto;
  margin-top: 2vh;
  .searchOneText {
    width: 6vw;
    font-size: 1vw;
  }
  .searchelect {
    width: 6vw;
    color: #005ebb;
    font-size: 1.2vw;
    font-weight: 600;
  }
  .to {
    width: 2vw;
  }
  :deep(.el-input__inner) {
    font-size: 0.8vw;
  }
}
.addeviceLeft {
  width: 100%;
  height: 66.8vh;
  background: #efefef;
  margin-top: 2vh;

  margin-bottom: 2vh;
  overflow: hidden;
  .addeviceTop {
    width: 95%;
    margin: 0 auto;
    margin-top: 2vh;
    display: flex;
    .deviceName {
      width: 4vw;
      font-size: 1vw;
    }
  }
}
.justTable {
  width: 95%;
  margin: auto;
}

.leftArrow {
  width: 3.9vw;
  height: 4.6vh;

  background: url(@/assets/img/left.png);
  background-size: 100% 100%;
}
.rightArrow {
  width: 3.9vw;
  height: 4.6vh;

  background: url(@/assets/img/right.png);
  background-size: 100% 100%;
}
.el-date-picker {
  font-size: 0.8vw;
}
.el-input__icon {
  cursor: pointer;
}
</style>
